<template>
  <div id="rightAll">
    <div class="textSettingTitle text">字体</div>

    <div class="settingItem">
      <div class="settingItemText text">字体颜色</div>
      <!-- <div class="bacI"></div> -->
      <input type="text" v-model="styleObj.color" placeholder="例如:red/#fff/rgb(255,100,100)"/>
    </div>

    <div class="settingItem">
      <div class="settingItemText text">字体粗细</div>
      <select name="selectWeight" id="" v-model="styleObj.fontWeight">
        <option :value="100">100</option>
        <option :value="200">200</option>
        <option :value="300">300</option>
        <option :value="400" selected>400</option>
        <option :value="500">500</option>
        <option :value="600">600</option>
        <option :value="700">700</option>
        <option :value="800">800</option>
        <option :value="900">900</option>
      </select>
    </div>

    <div class="settingItem">
      <div class="settingItemText text">字体大小</div>
      <div>
        <input type="text" v-model="styleObj.fontSize" />
        <span class="px">px</span>
      </div>
    </div>

    <div class="settingItem">
      <div class="settingItemText text">斜体</div>
      <button @click="changeEm">{{ styleObj.isEm }}</button>
    </div>

    <div class="settingItem">
      <div class="settingItemText text">字体样式</div>
      <select name="selectFamily" id="" v-model="styleObj.fontFamily">
        <option value="Helvetica Neue" selected>Helvetica Neue</option>
        <option value="Helvetica">Helvetica</option>
        <option value="PingFang SC">PingFang SC</option>
      </select>
    </div>

    <div class="textSettingTitle text">文本</div>

    <div class="settingItem">
      <div class="settingItemText text">行高</div>
      <div>
        <input type="text" v-model="styleObj.lineHeight" />
        <span class="px">px</span>
      </div>
    </div>

    <div class="settingItem">
      <div class="settingItemText text">缩进</div>
      <div>
        <input type="text" v-model="styleObj.textIndent" />
        <span class="px">px</span>
      </div>
    </div>

    <div class="settingItem">
      <div class="settingItemText text">装饰线</div>
      <select name="selectLine" id="" v-model="styleObj.textDecoration">
        <option value="none" selected>无</option>
        <option value="overline">上</option>
        <option value="line-through">中</option>
        <option value="underline">下</option>
      </select>
    </div>

    <div class="textSettingTitle text">
      定位
    </div>
    
    <div class="settingItem">
      <div class="settingItemText text">间距</div>
        <div>
          <input type="text" v-model="styleObj.letterSpacing">
          <span class="px">px</span>
        </div>
      </div>
    </div>
</template>

<script>
import { deepClone } from '@/utils/deepClone';
export default {
  name: "textStyleVue",
  props: ["views","currView"],
  data() {
    return {
      styleObj: {
        // isEm: false,
        // fontStyle:"normal",
        // lineHeight: 2,
        // textIndent: 0,
        // fontWeight: 400,
        // textDecoration: "",
        // fontFamily: "",
        // fontSize: "14",
        // color: "",
        // letterSpacing:""
      },
    };
  },
  methods: {
    changeEm() {
      this.styleObj.isEm = !this.styleObj.isEm;
      if(this.styleObj.isEm){
        this.styleObj.fontStyle="italic";
      }else{
        this.styleObj.fontStyle="normal";
      }
      this.changeElementStyle(this.views,this.styleObj);
    },
    // collectWeight(e) {
    //   console.log("collectWeight", e.target.value);
    //   this.styleObj["fontWeight"] = Number( e.target.value);
    //    console.log("collectWeight", this.styleObj.fontWeight);
    //    this.changeElementStyle(this.views[0],this.views[0].id,this.styleObj);
    // },
    // collecttextDecoration(e) {
    //   this.styleObj.textDecoration = e.target.value;
    //   this.changeElementStyle(this.views[0],this.views[0].id,this.styleObj);
    // },
    // collectfontFamily(e) {
    //   this.styleObj.fontFamily = e.target.value;
    //   this.changeElementStyle(this.views[0],this.views[0].id,this.styleObj);
    // },
    // receiveChangeElementStyle(changeElementStyleFun){
    //     console.log("receiveChangeElementStyle");
    //     changeElementStyleFun(this.views[0],this.views[0].id,this.styleObj);
    //     this.myfun=changeElementStyleFun;
    // },
    changeElementStyle(element,styleObj) {
      //for in会将对象的属性和原型上的属性一块遍历出来,顺序是先对象属性然后是原型链上的属性
      //如果需要过滤掉原型链上的属性，可以使用asOwnProperty()方法
      //或者使用Object.keys()是ES5新增的一个对象方法，该方法返回对象自身属性名组成的数组，
      //他会自动过滤掉原型链上的属性，然后可以通过数组的forEach()方法来遍历。
      console.log("changeElementStyle");
      // if (!id === element.id) return console.log("return");
      let currIndex=this.views.length-1;
          this.views.forEach((element,index) => {
          if(element.id===this.currView.id){ 
             currIndex=index;
          }
      });
      for (let key in styleObj) {
        if (Object.prototype.hasOwnProperty.call(styleObj, key)) {
            // console.log(key,styleObj[key]);
            if(['isEm', 'textDecoration', 'color',"fontWeight","fontStyle","fontFamily","textAlign"].includes(key)){
                element[currIndex].textStyle[key] = styleObj[key];
            }else{
                element[currIndex].textStyle[key] = styleObj[key]+"px";
                // element[currIndex].textStyle[key] = styleObj[key]
            }
          
        }
      }
    },
  },
  mounted(){
      // this.$bus.$on("givechangeElementStyle",this.receiveChangeElementStyle)
      // this.styleObj=this.currView.textStyle;
      this.styleObj=deepClone(this.currView.textStyle);
  },
  updated(){
      console.log("updata");
    //   this.myfun;
    this.changeElementStyle(this.views,this.styleObj);
  }
};
</script>

<style>
#rightAll {
  margin-left: 8px;
}
.text {
  text-align: left;
}
.textSettingTitle {
  background-color: #dbe2f2;
  width: 100%;
  height: 28px;
  margin-top: 2px;
  line-height: 28px;

  font-weight: 700;
  text-indent: 1em;
}
.settingItem {
  display: flex;
  position: relative;
  width: 100%;
  height: 28px;
  line-height: 28px;
  /* margin: 20px 12px; */
  padding-bottom: 5px;
  margin-top: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid #f4f4f4;
}
.settingItemText {
  font-size: 12px;
  color: #444;
}
.settingItem :last-child {
  position: absolute;
  left: 30%;
}
input {
  height: 20px;
  width: 200px;
  text-indent: 1em;
}
.px {
  margin-left: 150px;
}
.bacI {
  width: 24px;
  height: 24px;
  background-image: url("../../assets/page.png");
  background-size: cover;
  border: 1px solid #dcdfe6;
}
</style>